前言

今天我們將講解JavaScript裡頭的展開運算符和其餘運算符

說明

Spread Operator(展開運算符):

Spread Operator讓人能在需要多個參數(Function invocation)或元素(Array內)的地方擴充內部元素

兩種語法：

// 第一種 Function invocation
funcitonName (a, ...iterableObj, b)
// 第二種 Array內
[1, ...iterableObj, 'Test']

以下舉例：

// 執行sum function時 (第一種)
function sum(a, b, c, d, e){
  return a + b + c + d + e;
}
let arr = [2, 3, 4]
console.log(sum(1, ...arr, 5)) // 15

// 合併Array(第二種)
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr1, ...arr2]) // [1, 2, 3, 4, 5, 6]

除此之外Spread Operator也可以用來淺拷貝Array

註: 淺拷貝(shallow-copy)意思是只拷貝參照值，避免copy by reference情況發生

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

Rest Operator(其餘運算符):

Rest Operator是將許多元素，壓縮成一個『Array』

• 使用時機為定義函式時

function Name(a, b, ...Arguments){
 //執行程式碼
}

試想若要計算數值相加，該如何撰寫函示呢？

// 兩個數值相加
function sum(a, b){
  return a + b;
}

console.log(sum(2, 3))

// 三個數值相加
function sum(a, b, c){
  return a + b + c;
}

console.log(sum(2, 3, 4))

針對不同數量的數值相加，都必須要宣告一個函式，這樣非常麻煩且沒有效率

若使用rest operator，一個函示即可滿足多種數值相加：

function sum(...Args){
  let sum = 0
  for (i = 0 ; i < Args.length ; i++){
    sum += Args[i];
  }
  return sum;
}

console.log(sum(1, 2, 3))  //6
console.log(sum(1, 2, 3, 4)) //10